<template>
  <el-card>
    <el-form inline label-width="88px">
      <el-form-item label="供应商">
        <el-select
          v-model="supplier.queryParams.supplierId"
          placeholder="请输入关键词"
          reserve-keyword
          filterable
          remote
          clearable
          :remote-method="findSupplier"
          size="small"
        >
          <el-option
            v-for="item in supplier.supplierList"
            :value="item.id"
            :label="item.orgNameZh"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-form>

    <el-table :data="list" border>
      <el-table-column label="供应商名称" align="center" prop="supplierName" />
      <el-table-column
        label="最大申请审批次数"
        align="center"
        prop="maxAmount"
      />
      <el-table-column label="类型" align="center" prop="type" width="150">
        <template slot-scope="scope">
          {{ typeList[scope.row.type] }}
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" fixed="right" width="250">
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['editSupplierAmount']"
            @click="handleShow(scope.row)"
            >编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :pageSizes="[10, 20, 50, 100, 200]"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />

    <el-dialog
      :title="detail.title"
      :visible.sync="detail.dialogVisible"
      v-loading="detail.dialogLoading"
      center
    >
      <el-form label-width="88px">
        <el-form-item label="供应商">
          <el-input
            disabled
            v-model="detail.info.supplierName"
            size="small"
          ></el-input>
        </el-form-item>
        <el-form-item label="类型">
          <el-select v-model="detail.info.type">
            <el-option
              v-for="(index, item) in typeList"
              :label="index"
              :value="item"
              disabled
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="申请次数">
          <el-input-number
            v-model="detail.info.maxAmount"
            size="small"
            :min="0"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="立即生效">
          <el-tooltip content="设置的申请次数是否立即生效">
            <el-radio-group v-model="detail.useNow">
              <el-radio :label="true">是</el-radio>
              <el-radio :label="false">否</el-radio>
            </el-radio-group>
          </el-tooltip>
        </el-form-item>
      </el-form>
      <template slot="footer">
        <el-button @click="save" v-hasPermi="['editSupplierAmount']"
          >保存</el-button
        >
      </template>
    </el-dialog>
  </el-card>
</template>

<script>
import {
  supplierAllList,
  amountList,
  amountInfo,
  amountType,
  amountEdit,
} from "@/api/supplierActivity/supplier";
// 供应商管理
export default {
  name: "supplier-manage",
  data() {
    return {
      list: [],
      typeList: {},
      total: 0,
      detail: {
        info: {},
        dialogVisible: false,
        dialogLoading: false,
        useNow: true,
      },
      queryParams: {
        pageSize: 10,
        total: 0,
        pageNum: 1,
        supplierId: undefined,
      },
      supplier: {
        supplierList: [],
        queryParams: {
          supplierId: undefined,
          orgNameZh: undefined,
          auditStatus: 1,
        },
      },
    };
  },
  mounted() {
    this.getList();
    this.getTypeList();
  },
  methods: {
    getList() {
      amountList(this.queryParams).then((res) => {
        this.total = res.total;
        this.list = res.rows;
      });
    },
    getTypeList() {
      amountType().then((res) => {
        console.log(res);
        this.typeList = res;
      });
    },
    getSupplierList() {
      supplierAllList(this.supplier.queryParams).then((res) => {
        this.supplier.supplierList = res.rows;
      });
    },
    findSupplier(query) {
      if (query != "") {
        this.supplier.queryParams.orgNameZh = query;
        this.getSupplierList();
      }
    },
    handleShow(row) {
      this.detail.info = {};
      this.detail.title = row.supplierName;
      this.detail.dialogLoading = true;
      this.detail.dialogVisible = true;
      amountInfo(row.supplierId).then((res) => {
        this.detail.info = res;
        this.detail.dialogLoading = false;
      });
    },
    save() {
      const params = this.detail.info;
      params.useNow = this.detail.useNow;
      amountEdit(params).then((res) => {
        this.$message.success("修改成功");
      });
    },
  },
};
</script>

<style>
</style>